import TypeCount from "@/components/TypeCount";
import Title from "../../components/title";
import "./index.less";
import Line from "@/components/charts/Line/new";
import * as echarts from "echarts";

const R_1_box = (props: any) => {
  const data = [
    {
      name: "累计关注人数",
      value: "180234",
    },
    {
      name: "新增人数",
      value: "180234",
    },
    {
      name: "取消关注",
      value: "180234",
    },
    {
      name: "净增人数",
      value: "180234",
    },
  ];
  const option = {
    option: {
        legend: {
            show: true,
        },
      tooltip: {
        textStyle: {
          fontSize: 14,
        },
      },

      yAxis: [
        {
          nameTextStyle: {
            fontSize: 16,
          },
          splitNumber: 4,
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#7CB9D7",
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgba(255, 255, 255, .2)",
            },
          },
        },
        {
          nameTextStyle: {
            fontSize: 16,
          },
          splitNumber: 4,
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255, 255, 255, .1)",
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            formatter: "{value} %", //右侧Y轴文字显示
            textStyle: {
              color: "#7CB9D7",
            },
          },
        },
      ],

      xAxis: {
        data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        axisLine: {
          show: "true",
          lineStyle: {
            color: "rgba(255, 255, 255, .2)",
          },
        },
      },
    },
    series: [
      {
        type: "bar",
        barWidth: 10,
        name: "客流量",
        styleType: "gradientLine",
        data: [120, 132, 101, 134, 90, 230, 210],
        symbol: "circle",
        symbolSize: 0,
        // smooth: 'false',
        label: {
          show: false,
          position: "top",
          fontSize: 16,
          color: "#fff",
          formatter: "{c}",
        },
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#01E9F9", // 0% 处的颜色
              },
              {
                offset: 0.55,
                color: "#1370E3", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#021F5A", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
          width: 2,
        },
      },
      {
        type: "line",
        smooth: false,
        name: "饱和度",
        styleType: "normalLine",
        data: [120, 132, 101, 134, 90, 230, 210],
        symbol: "circle",
        symbolSize: 5,
        showSymbol: true,
        yAxisIndex: 1,
        itemStyle: {
          normal: {
            color: "#FBD85F",

            lineStyle: {
              color: "#FBD85F",
              width: 1,
              shadowBlur: 3,
              shadowColor: "#FBD85F80",
              shadowOffsetY: 8,
            },
          },
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(33, 255, 203,0)",
            },
            {
              offset: 1,
              color: "rgba(33, 255, 203,0)",
            },
          ]),
        },
      },
    ],
  };
  return (
    <div className="h-[350px]">
      <Title title={"公众号监测"} />
      <div className="box_content" style={{ padding: "10px 20px" }}>
        <div className="flex justify-between items-center gap-[20px]">
          {data.map((item: any, index: number) => {
            return (
              <div key={index} className=" w-[25%] text-center ">
                <div className="font14 ">{item.name}</div>
                <div className="number_box2">
                  <TypeCount
                    title=""
                    size="small"
                    color="#12FFFC"
                    value={item.value}
                    unit=""
                  />
                </div>
              </div>
            );
          })}
        </div>
        <div className="h-[200px]">
          <Line {...option} style={{ width: "100%", height: "100%" }} />
        </div>
      </div>
    </div>
  );
};
export default R_1_box;
